
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/public/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/static/public/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="/static/admin/css/admin.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">

        /* tooltip */
        #tooltip{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:2px;
            display:none;
            color:#fff;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
    <div class="layui-btn-group demoTable">
        <a class="layui-btn layui-btn-sm a_menu" href="{:url('banner/publish')}" class="a_menu">
            添加轮播图
        </a>
    </div>
    <div>
        <form class="well form-inline margin-top-20" method="get" action="{:url('banner/index')}">
            序列号:
            <input type="text" class="form-control" name="sort" style="width: 120px;" value="{:input('request.sort')}" placeholder="请输入关键字">
            <input type="submit" class="layui-btn layui-btn-sm" value="搜索" />
            <a class="layui-btn layui-btn-sm" href="{:url('banner/index')}">清空</a>
        </form>
    </div>
</fieldset>
<table class="layui-table" lay-even="" lay-skin="row" lay-size="sm">
    <thead>
    <tr>
        <th>编号</th>
        <th>排序</th>
        <th>轮播图</th>
        <th>描述</th>
        <th>轮播图url链接地址</th>
        <th>创建时间</th>
        <th>最后修改时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <thead>
    {volist name="banner" id="vo"}
    <tr>
        <th>{$key+1}</th>
        <th>{$vo.sort}</th>
        {empty name="$vo.img"}
        <th>暂无数据</th>
        {else/}
        <th><a href="{$vo.img|geturl}" class="tooltip" ><img src="{$vo.img|geturl}" ></a></th>
        {/empty}
        <th>{$vo.title}</th>
        <th>{$vo.url}</th>
        <th>{$vo.create_time|date="Y-m-d H:i:s",###}</th>
        <th>{$vo.update_time|date="Y-m-d H:i:s",###}</th>
        <th> <a href="{:url('banner/publish',['id'=>$vo.id])}" class="layui-btn layui-btn-xs a_menu"  style="margin-right: 0;font-size:12px;">修改</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger delete" id="{$vo.id}" style="margin-right: 0;font-size:12px;">删除</a></th>
    </tr>
    {/volist}
    </thead>
    <tbody>
    </tbody>
</table>
<div>
    {$page}
</div>
<script src="/static/public/layui/layui.js" charset="utf-8"></script>
<script src="/static/public/jquery/jquery.min.js"></script>
<script>
    var message;
    layui.config({
        base: '/static/admin/js/',
        version: '1.0.1'
    }).use(['app', 'message'], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
</script>
<script type="text/javascript">

    $('.delete').click(function(){
        var id = $(this).attr('id');
        layer.confirm('确定要删除?', function(index) {
            $.ajax({
                url:"/admin/banner/delete",
                data:{id:id},
                success:function(res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.href = res.url;
                        },1500)
                    }
                }
            })
        })
    })
</script>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
        $('.a_menu').click(function(){
            var url = $(this).attr('href');
            var a = 0;
            $.ajax({
                url:url
                ,async:false
                ,success:function(res){
                    if(res.code == 0) {
                        layer.msg(res.msg);
                        a = 1;
                    }
                }
            })
            if(a === 0) {
                layer.open({
                    type:2,
                    content:[url, 'no'],
                    area: ['600px', '500px'],
                    end:function(){
                        location.reload();
                    }
                });
            }
            return false;
        })
    });
    $(function(){
        var x = 10;
        var y = 20;
        $(".tooltip").mouseover(function(e){
            var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图' height='200'/>"+"<\/div>"; //创建 div 元素
            $("body").append(tooltip);  //把它追加到文档中
            $("#tooltip")
                .css({
                    "top": (e.pageY+y) + "px",
                    "left":  (e.pageX+x)  + "px"
                }).show("fast");    //设置x坐标和y坐标，并且显示
        }).mouseout(function(){
            $("#tooltip").remove();  //移除
        }).mousemove(function(e){
            $("#tooltip")
                .css({
                    "top": (e.pageY+y) + "px",
                    "left":  (e.pageX+x)  + "px"
                });
        });
    })

</script>
</body>
</html>
